﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>JQuery选择器</title>
	</head>

	<body>
		<h2>这是h2标题</h2>
		<p class="a"> 这是一个p段落</p>
		<p>这是另一个p段落</p>

		<p>列表1：</p>
		<ul>
			<li>Coffee</li>
			<li>Milk</li>
			<li>Tea</li>
		</ul>
		<p>列表2：</p>
		<ul>
			<li>Coffee</li>
			<li>Milk</li>
			<li>Tea</li>
		</ul>

		<table border="1">
			<tr>
				<th>网站名</th>
				<th>网址</th>
			</tr>
			<tr>
				<td>Google</td>
				<td>http://www.google.com</td>
			</tr>
			<tr>
				<td>Baidu</td>
				<td>http://www.baidu.com</td>
			</tr>
			<tr>
				<td>菜鸟教程</td>
				<td>http://www.runoob.com</td>
			</tr>
			<tr>
				<td>淘宝</td>
				<td>http://www.taobao.com</td>
			</tr>
			<tr>
				<td>Facebook</td>
				<td>http://www.facebook.com</td>
			</tr>
		</table>
		<script src="../jquery-1.12.4.min.js"></script>
		<script>
			$('p.a').hide();
			$('ul li:first-child').hide();
			$("tr:odd").css("background-color", "yellow");
			$("td:even").css({
				'color': 'red',
				'font-weight': 'bolder'
			});

			/*var trs=document.getElementsByTagName('tr')
				for (var i = 0; i < trs.length; i++) {
					if (i%2==0) {
						trs[i].style.background='yellow';
					}
				}*/
		</script>

	</body>

</html>